<template>
    <div class="footer-container">
        <!-- 全选区域 -->
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="fullcheck" :checked="isfull" @change="oncheckboxChange" />
            <label class="form-check-label" for="fullcheck"> 全选 </label>
        </div>
        <!-- 合计区域 -->
        <div>
            <span>合计</span>
            <span class="amount">￥{{ amount.toFixed(2) }}</span>
        </div>
        <!-- 按钮区域 -->

        <button type="button" class="btn btn-primary btn-settle" :disabled="total === 0">
            结算({{ total }})
        </button>
    </div>
</template>

<script>
export default {
    name: "EsFooter",
    emits:['fullChange'],
    data() {
        return {};
    },
    props: {
        // 已勾选上商品的总共价格
        amount: {
            type: Number,
            default: 0,
        },
        // 已勾选商品的总数量
        total: {
            type: Number,
            default: 0,
        },
        // 全选按钮
        isfull: {
            type: Boolean,
            default: false,
        },
    },
    methods:{
        oncheckboxChange(e){
            this.$emit('fullChange',e.target.checked)
        }
    }
};
</script>

<style lang="less" scoped>
.footer-container {
    height: 50px;
    width: 100%;

    background-color: white;
    border-top: 1px solid #efefef;

    position:sticky;
    bottom: 0;
    left: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.amount {
    font-weight: bold;
    color: red;
}

.btn-settle {
    min-width: 90px;
    height: 38px;
    border-radius: 19px;
}
</style>